<template>
  <div class="index-container ec-container">
    <el-row :gutter="10" class="form">
      <el-col :span="6">
        <div class="grid-content">
          <span>渠道：</span>
          <el-select v-model="channelId" placeholder="请选择">
            <el-option
              v-for="item in channelOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content">
          <span>平台：</span>
          <el-select v-model="platformId" placeholder="请选择">
            <el-option
              v-for="item in platformOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content">
          <span>店铺编码：</span>
          <el-input class="w60" v-model="storeId" label-width="50"></el-input>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content">
          <span>店铺名称：</span>
          <el-input class="w60" v-model="storeName" label-width="50"></el-input>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="8">
        <div id="sex" class="grid-content"></div>
      </el-col>
      <el-col :span="16">
        <div class="grid-content des">
          <p>* 本页面基础数据取会员注册时录入的基础信息，如性别、年龄等；</p>
          <p>* 数据更新口径；截止昨天凌晨数据；</p>
        </div>
        <div id="age" class="grid-content mt10 age"></div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="8">
        <div id="registerTime" class="grid-content"></div>
      </el-col>
      <el-col :span="8">
        <div id="consumer" class="grid-content"></div>
      </el-col>
      <el-col :span="8">
        <div id="grade" class="grid-content"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: "memberQuantity",
    data() {
      return {
        //渠道下拉选项
        channelOptions: [
          {
            value: null,
            label: null,
          }
        ],

        //平台下拉选项
        platformOptions: [
          {
            value: null,
            label: null,
          }
        ],
        value: "",
        stsDate: null,//统计日期
        storeId: null,//店铺ID
        storeName: null,//店铺ID
        channelId: null,//渠道ID
        platformId: null,//平台Id

        //性别比例饼状图；
        male: 0,//有效会员
        female: 0,//无效会员

        //年龄查询
        less10: 0,
        total10to15: 0,
        total15to20: 0,
        total20to25: 0,
        total25to30: 0,
        total30to35: 0,
        total35to40: 0,
        total40to45: 0,
        total45to50: 0,
        total50to55: 0,

        //注册时间查询
        less2: 0,
        total3To6: 0,
        total6To9: 0,
        total9To12: 0,
        total12To15: 0,
        total15To18: 0,
        total18To21: 0,
        total21To24: 0,
        more24: 0,

        //是否消费分布
        isConsumed: 0,
        notConsumed: 0,

        //等级分布
        diamond2Level: 0,
        diamondLevel: 0,
        normalLevel: 0,
        fansLevel: 0,

      };
    },

    created(){
//      this.getStsDate();
    },
    mounted() {
      this.listAllChannel();//获取所有的渠道信息
      this.listAllPlatform();//获取所有的平台信息
      this.getCountOfGender();
      this.getAgeDistributionOfMember();
      this.getRegisterTime();
      this.getCountOfMemberIsConsume();
      this.getCountOfMemberLevel();
    },
    methods: {


      /**
       * 获取统计日期
       */
      getStsDate(){
        let this_ = this;
        let nowDate = new Date();
        let year = nowDate.getFullYear();
        let month = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1)
          : nowDate.getMonth() + 1;
        let day = (nowDate.getDate() - 1) < 10 ? "0" + (nowDate.getDate()-1) : (nowDate.getDate() - 1);
        this_.stsDate = year + "-" + month + "-" + day;
      },

      /**
       * 性别比例饼状图数据查询
       */
      getCountOfGender(){
        let this_ = this;
        let param = {
          channelId: this_.channelId,
          storeId: this_.storeId,
          storeName: this_.storeName,
          platformId: this_.platformId,
          status: 1,
          deleteFlag: 0,
          deptId: null,
          merchantId: null,
          id: null,
          stsDate: this_.stsDate,
        };
        this_.utils.request.getCountOfGender(param, res => {
          if (res !== null && res.code === '0000' && res.data !== null) {
            this_.male = res.data.maleMember;
            this_.female = res.data.femaleMember;
            this_.sex();
          } else {
            this_.$message({message: '无法获取男性和女性会员总记录数', type: 'error'})
          }
        });
      },


      /**
       * 获取会员分布-柱状图
       */
      getAgeDistributionOfMember(){
        let this_ = this;
        let param = {
          channelId: this_.channelId,
          storeId: this_.storeId,
          storeName: this_.storeName,
          platformId: this_.platformId,
          status: 1,
          deleteFlag: 0,
          deptId: null,
          merchantId: null,
          id: null,
          stsDate: this_.stsDate,
        };
        this_.utils.request.getAgeDistributionOfMember(param, res => {
          if (res !== null && res.code === '0000' && res.data !== null) {
            this_.less10 = res.data.less10;
            this_.total10to15 = (res.data.total10to15 / 10000);
            this_.total15to20 = (res.data.total15to20 / 10000);
            this_.total20to25 = (res.data.total20to25 / 10000);
            this_.total25to30 = (res.data.total25to30 / 10000);
            this_.total30to35 = (res.data.total30to35 / 10000);
            this_.total35to40 = (res.data.total35to40 / 10000);
            this_.total40to45 = (res.data.total40to45 / 10000);
            this_.total45to50 = (res.data.total45to50 / 10000);
            this_.total50to55 = (res.data.total50to55 / 10000);
            this_.more55 = res.data.more55;
            this_.age();
          } else {
            this_.$message({message: '没有获取到总记录数', type: 'error'})
          }
        });
      },


      /**
       * 注册时长分布
       */
      getRegisterTime(){
        let this_ = this;
        let param = {
          channelId: this_.channelId,
          storeId: this_.storeId,
          storeName: this_.storeName,
          platformId: this_.platformId,
          status: 1,
          deleteFlag: 0,
          deptId: null,
          merchantId: null,
          id: null,
          stsDate: this_.stsDate,
        };
        this_.utils.request.getRegisterTime(param, res => {
          if (res !== null && res.code === '0000' && res.data !== null) {
            this_.less2 = res.data.less2;
            this_.total3To6 = res.data.total3To6;
            this_.total6To9 = res.data.total6To9;
            this_.total9To12 = res.data.total9To12;
            this_.total12To15 = res.data.total12To15;
            this_.total15To18 = res.data.total15To18;
            this_.total18To21 = res.data.total18To21;
            this_.total21To24 = res.data.total21To24;
            this_.more24 = res.data.more24;
            this_.registerTime();
          } else {
            this_.$message({message: '无法获取注册时长会员总记录数', type: 'error'})
          }
        });
      },
      /**
       * 等级分布
       */
      getCountOfMemberLevel(){
        let this_ = this;
        let param = {
          channelId: this_.channelId,
          storeId: this_.storeId,
          storeName: this_.storeName,
          platformId: this_.platformId,
          status: 1,
          deleteFlag: 0,
          deptId: null,
          merchantId: null,
          id: null,
          stsDate: this_.stsDate,
        };
        this_.utils.request.getCountOfMemberLevel(param, res => {
          if (res !== null && res.code === '0000' && res.data !== null) {
            this_.diamondLevel = res.data.diamondLevel / 10000;
            this_.diamond2Level = res.data.diamond2Level / 10000;
            this_.normalLevel = res.data.normalLevel / 10000;
            this_.fansLevel = res.data.fansLevel / 10000;
            this_.grade();
          } else {
            this_.$message({message: '无法获取会员等级统计记录数', type: 'error'})
          }
        });
      },


      /**
       * 是否消费饼状图数据查询
       */
      getCountOfMemberIsConsume(){
        let this_ = this;
        let param = {
          channelId: this_.channelId,
          storeId: this_.storeId,
          storeName: this_.storeName,
          platformId: this_.platformId,
          status: 1,
          deleteFlag: 0,
          deptId: null,
          merchantId: null,
          id: null,
          stsDate: this_.stsDate,
        };
        this_.utils.request.getCountOfMemberIsConsume(param, res => {
          if (res !== null && res.code === '0000' && res.data !== null) {
            this_.isConsumed = res.data.isConsumed;
            this_.notConsumed = res.data.notConsumed;
            this_.consumer();
          } else {
            this_.$message({message: '无法获取会员是否消费的统计记录数', type: 'error'})
          }
        });
      },


      //  会员性别分布
      sex() {
        let sex = document.getElementById("sex");
        let sexWrap = this.$echarts.init(sex);
        let option = {
          title: {
            text: "会员性别分布"
          },
          color: ["#1ea084", "#b0d1b5"],
          tooltip: {
            show: true,
            trigger: "item",
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          legend: {
            orient: "horizontal",
            left: "center",
            data: ["f", "m"]
          },
          series: [
            {
              name: "",
              type: "pie",
              radius: ["50%", "65%"],
              data: [
                {value: this.female, name: "女性"},
                {value: this.male, name: "男性"}
              ]
            }
          ]
        };
        sexWrap.setOption(option);
      },
      // 会员年龄分布
      age() {
        let age = document.getElementById("age");
        let ageWrap = this.$echarts.init(age);
        let option = {
          title: {
            text: "会员年龄分布"
          },
          legend: {
            data: ["会员数"],
            left: "center"
          },


          xAxis: {
            type: "category",
            data: [
              "小于10",
              "10-15",
              "15-20",
              "20-25",
              "25-30",
              "30-35",
              "35-40",
              "40-45",
              "45-50",
              "50-55",
              ">=55"
            ],
            axisLabel: {
              interval: 0,
              rotate: 45 //代表逆时针旋转45度
            }
          },
          yAxis: [
            {
              type: "value",
              name: "",
              min: 0,
              max: 5,
              position: "left",
              axisLabel: {
                formatter: "{value} 万"
              }
            }
          ],
          series: [
            {
              name: "会员数",
              type: "bar",
              data: [this.less10, this.total10to15, this.total15to20, this.total20to25, this.total25to30, this.total30to35, this.total35to40, this.total40to45, this.total45to50, this.total50to55, this.more55],
              barWidth: 30,
              color: "#1ea084"
            }
          ]
        };
        ageWrap.setOption(option);
      },
      // 注册时长分布
      registerTime() {
        let registerTime = document.getElementById("registerTime");
        let myRegisterTime = this.$echarts.init(registerTime);
        let option = {
          title: {
            text: "注册时长分布"
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            }
          },
          legend: {
            data: ["会员数"],
            left: "center"
          },
          xAxis: [
            {
              type: "value",
              name: "",
              min: 0,
              max: 70,
              position: "bottom",
              axisLabel: {
                formatter: "{value} 万"
              }
            }
          ],
          yAxis: {
            name: "",
            type: "category",
            axisLabel: {
              interval: 0,
              rotate: 45 //代表逆时针旋转45度
            },
            data: [
              "<=3个月",
              "3~6个月",
              "6~9个月",
              "9~12个月",
              "2~15个月",
              "5~18个月",
              "8~21个月",
              "21~24个月",
              ">=2年"
            ]
          },
          series: [
            {
              name: "会员数",
              type: "bar",
              barWidth: 30,
              data: [
                this.less2,
                this.total3To6,
                this.total6To9,
                this.total9To12,
                this.total12To15,
                this.total15To18,
                this.total18To21,
                this.total21To24,
                this.more24,
              ],
              color: "#1ea084"
            }
          ]
        };
        myRegisterTime.setOption(option);
      },
      //  会员是否有消费_分布
      consumer() {
        let consumer = document.getElementById("consumer");
        let consumerWrap = this.$echarts.init(consumer);
        let option = {
          title: {
            text: "会员是否有消费_分布"
          },
          color: ["#1ea084", "#b0d1b5"],
          tooltip: {
            show: true,
            trigger: "item",
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          legend: {
            orient: "horizontal",
            left: "center",
            data: ["否", "是"]
          },
          series: [
            {
              name: "",
              type: "pie",
              radius: ["50%", "65%"],
              data: [
                {value: this.notConsumed, name: "否"},
                {value: this.isConsumed, name: "是"}
              ]
            }
          ]
        };
        consumerWrap.setOption(option);
      },
      // 等级分布
      grade() {
        let grade = document.getElementById("grade");
        let myGrade = this.$echarts.init(grade);
        let option = {
          title: {
            text: "等级分布"
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            }
          },
          legend: {
            data: ["会员数"],
            left: "center"
          },
          xAxis: [
            {
              type: "value",
              name: "",
              min: 0,
              max: 100,
              position: "bottom",
              axisLabel: {
                formatter: "{value} 万"
              }
            }
          ],
          yAxis: {
            name: "",
            type: "category",
            axisLabel: {
              interval: 0,
              rotate: 60 //代表逆时针旋转45度
            },
            data: ["粉丝会员", "普通会员", "emo钻石II会员", "demo钻石会员"]
          },
          series: [
            {
              name: "会员数",
              type: "bar",
              barWidth: 30,
              data: [this.fansLevel, this.normalLevel, this.diamondLevel, this.diamond2Level],
              color: "#1ea084"
            }
          ]
        };
        myGrade.setOption(option);
      },

      /**
       * 查询所有渠道接口，用作下拉框
       */
      listAllChannel(){
        let this_ = this;
        let param = {
          channelId: this_.channelId,
          storeId: this_.storeId,
          storeName: this_.storeName,
          platformId: this_.platformId,
          status: 1,
          deleteFlag: 0,
          deptId: null,
          merchantId: null,
          id: null,
          stsDate: this_.stsDate,
          createTimeStart: null,
        };
        this.utils.request.listAllChannel(param, res => {
          if (res !== null && res.code === '0000' && res.data !== null && res.data.length > 0) {
            this.channelOptions = res.data;
          } else {
            this.$message({message: '没有获取到渠道信息', type: 'error'})
          }
        });
      },
      /**
       * 查询所有渠道接口，用作下拉框
       */
      listAllPlatform(){
        let this_ = this;
        let param = {
          channelId: this_.channelId,
          storeId: this_.storeId,
          storeName: this_.storeName,
          platformId: this_.platformId,
          status: 1,
          deleteFlag: 0,
          deptId: null,
          merchantId: null,
          id: null,
          stsDate: this_.stsDate,
          createTime: null,
        };
        this.utils.request.listAllPlatform(param, res => {
          if (res !== null && res.code === '0000' && res.data !== null && res.data.length > 0) {
            this.platformOptions = res.data;
          } else {
            this.$message({message: '没有获取到平台信息', type: 'error'})
          }
        });
      },

    }
  };
</script>

<style scoped lang="scss">
 @import "../../../../assets/css/dataCenterEcharts.css";

  .ec-container {
    .des {
      background: #fff;
      height: 90px;
    }
    .age {
      height: 360px;
    }
    .memberNum {
      .grid-content {
        height: 140px;
        .counts {
          font-size: 28px;
          color: #333;
          font-weight: 700;
          margin: 20px 0;
        }
        .line {
          margin: 10px 0;
          display: flex;
          justify-content: space-between;
          i {
            width: 49%;
            height: 4px;
            display: block;
            background: #a5d9ce;
            &.on {
              background: #1ea084;
            }
          }
        }
      }
    }
  }
</style>
